<template>
  <div class="register">
    <i class="iconfont icon-fanhui fanhui" @click="back"></i>
    <img src="../static/img/logo.png" alt="" class="logo">
    <form class="form">
      <input type="text" name="username" class="input" placeholder="用户名" v-model="name">
      <input type="password" name="password" class="input" placeholder="请设置登陆密码" v-model="password">
      <input type="password" name="password" class="input" placeholder="请确认密码" v-model="repassword">
      <input type="buttom" class="submit" value="注册" @click="register">
    </form>
  </div>
</template>

<script>
  import {ToastPlugin} from 'vux'
  import Vue from "vue"

  Vue.use(ToastPlugin)
  export default {
    data() {
      return {
        name: '',
        password: '',
        repassword: ''
      }
    },
    methods: {
      back() {
        this.$router.go(-1);
      },
      register() {
        this.valid()
        this.query()
      },
      valid() {
        if (this.name === '' || this.password === '' || this._password === '' || this.password !== this.repassword) {
          _this.$vux.toast.text('请输入正确信息', 'bottom')
          return
        }
      },
      save() {
        let _this = this
        let User = Bmob.Object.extend("user");
        let user = new User();
        user.set("name", this.name);
        user.set("password", this.password);
        user.set("avatar", 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1524484996&di=b87c46aa8e665603f0944a5658279560&src=http://up.enterdesk.com/edpic/b1/68/3c/b1683c1d6f6ed411c1f6ec2b31923955.jpg');
        user.save(null, {
          success: function (gameScore) {
            _this.$vux.toast.text('注册成功', 'bottom')
            _this.$router.push({path: '/user/login'})
          },
          error: function (gameScore, error) {
          }
        })
      },
      query() {
        let _this = this
        let User = Bmob.Object.extend("user");
        let query = new Bmob.Query(User);
        // 查询所有数据
        query.find({
          success: function (results) {
            if (results) {
              for (let i = 0; i < results.length; i++) {
                if (_this.name === results[i].attributes.name) {
                  _this.$vux.toast.text('用户名已注册', 'bottom')
                  return
                }
              }
              _this.save()
              return
            }
            _this.save()
          },
          error: function (error) {
          }
        })
      }
    }
  }
</script>

<style scoped>
  .register {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;
  }

  .register .fanhui {
    font-size: 20px;
    color: #06cd56;
    font-weight: bold;
    margin: 15px 0 0 15px;
  }

  .register .logo {
    display: block;
    margin: 25px auto;
    width: 80px;
  }

  .register .form {
  }

  .register .form .input {
    display: block;
    width: 80%;
    height: 35px;
    outline: 0 none;
    border: 0 none;
    margin: 15px auto;
    box-shadow: 0 0 3px #ddd;
    background: none
  }

  .register .form .input:focus {
    box-shadow: 0 0 3px #06cd56;
  }

  .register .form .submit {
    display: block;
    width: 80%;
    height: 45px;
    background: #06cd56;
    border: 0 none;
    outline: 0 none;
    color: #fff;
    margin: 15px auto;
    text-align: center;
  }
</style>
